<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'BBS_game.jsp' starting page</title>
    <%
        //绝对路径
        pageContext.setAttribute("APP_PATH",request.getContextPath());
     %>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
 	    <link href="jq22pd/jquery-hover/css/css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" type="text/css" href="jq22pd/jquery-hover/css/normalize.css">
		
		<link rel="stylesheet" type="text/css" href="jq22pd/jquery-hover/css/demo.css">
		<link rel="stylesheet" type="text/css" href="jq22pd/jquery-hover/css/set2.css">
		<link rel="stylesheet" type="text/css" href="jq22pd/jquery-hover/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="jq22pd/jquery-hover/css/demoadpacks.css">
		
		<link rel="stylesheet" href="jQuery/css/iziModal.min.css">
		
		
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="jQuery/js/jquery-2.1.1.min.js" type="text/javascript"></script>
		<script src="jQuery/js/iziModal.min.js" type="text/javascript"></script>
		<style type="text/css">

			#modal{background-image:url(image/pk_2.jpg);}
			#modal_2{background-image: url(image/pk_1.jpg)}
		</style>
  
  <body>
    <div class="container">

			
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<ul class="nav nav-pills">
				<li class="active">
					 <a href="#"> <span class="badge pull-right">3</span> BBS论坛</a>
				</li>
				<li>
					 <a href="#"> <span class="badge pull-right">16</span> More</a>
				</li>
			</ul>
		</div>
	</div>
</div>

<div class="container">
  <div class="row clearfix">
	<div class="col-md-12 column">
			<ul class="nav nav-tabs">
				<li>
					 <a href="BBS_game.jsp">首页</a>
				</li>
				<li class="">
				<s:if test="#session.user.id != null">
					 <a href="#">圈子</a>
				</s:if>
					 <s:else>
				<a class="trigger" href="#">圈子</a>
				</s:else>
				</li>
				<li class="">
				<s:if test="#session.user.id != null">
					 <a href="#">专题</a>
				</s:if>
				<s:else>
				<a class="trigger" href="#">专题</a>
				</s:else>
				</li>
				
				<li><s:if test="#session.user.id != null">
						<a href="show?id=${session.userData.id }">个人信息</a>
					</s:if>
					<s:else>
						<a class="trigger" href="#">个人信息</a>
					</s:else>
				</li>
					
			  <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            
          
            
            <ul class="nav nav-tabs">
            
            <li class="">
            	<s:if test="#session.user != null">
					 <a href="#" class="trigger" style="display: none;">请先登录</a>
				</s:if> 
				<s:else>
					 <a style="color: red" class="trigger" href="#">请先登录</a>
				</s:else>
				</li>
			  <li class="">
			 	<s:if test="#session.user != null">
					 <a href="#" class="trigger_2" style="display: none;">注册</a>
				</s:if> 
				<s:else>
					 <a href="#" class="trigger_2">注册</a>
				</s:else>
				</li>
				  <li class="">
				  <s:if test="#session.user != null">
				  	 <a href="loginout" >注销登录</a>
				  </s:if>
				</li>
				<s:if test="#session.user != null">
					<s:if test="#session.userData.avatar != null">
						<li><img src="image/${session.userData.avatar }" class="img-circle" width="50" height="40"></li>
					<li class=""><a>${session.user.loginName }</a></li>
					</s:if>
					<s:else>
						<li class=""><a style="color: red" href="view/BBS_RegisteMesage.jsp">请先完善个人信息</a></li>
					</s:else>
				
				</s:if>
				
			  </ul> 
	  </ul>
	  
	</div>
	</div>
	

</div>
			<header class="codrops-header">
			
			  
				<h1>王者皮肤论坛 <span>英雄皮肤评论区</span></h1>

				

			</header>

			<div class="content">

				<h2>Julia</h2>

				<div class="grid">

					<figure class="effect-julia">

						<img src="image/sunce.jpeg" alt="img21">

						<figcaption>

							<h2>英雄孙策 <span>猫狗日记</span></h2>

							<div style="opacity:0.7">

								<p>在皮肤的出场动作方面孙策明显就是一个暖男了</p>

								<p>一技能还是孙策往前方冲去，打出一个水坑</p>

								<p>二技能则是孙策连续的几次攻击了</p>

							</div>

							<a href="comePost?id=1">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-julia">

						<img src="image/gongben.jpg" alt="img22">

						<figcaption>

							<h2>英雄宫本 <span>地狱之眼</span></h2>

							<div style="opacity:0.7">

								<p>幽冥之眼则是以蓝色为主，紫色显得更高贵</p>

								<p>一技能的特效还是打出一道冲击波</p>

								<p>二技能在位移的起点有一只眼睛</p>

							</div>

							<a href="comePost?id=2">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Goliath</h2>

				<div class="grid">

					<figure class="effect-goliath">

						<img src="image/kai_2.jpg" alt="img23">

						<figcaption>

							<h2>英雄凯 <span>曙光守护者</span></h2>

							<p style="opacity:0.7">王者荣耀凯的五五开黑节曙光守护者皮肤网友表示太帅了!</p>

							<a href="comePost?id=3">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-goliath">

						<img src="image/sunwukong_2.jpg" alt="img24">

						<figcaption>

							<h2>英雄孙悟空<span>全息碎片</span></h2>

							<p style="opacity:0.7">孙悟空肩上扛着一根水管，脖子上戴着一个耳机</p>

							<a href="comePost?id=4">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Hera</h2>

				<div class="grid">

					<figure class="effect-hera">

						<img src="image/yingzheng.jpg" alt="img17">

						<figcaption>

							<h2>英雄嬴政 <span>暗夜贵公子</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-pdf-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-image-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-archive-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-code-o"></i></a>
							</p>
							<a href="comePost?id=5">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-hera">

						<img src="image/gongben_2.jpg" alt="img25">

						<figcaption>

							<h2>英雄宫本<span>霸王丸</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-pdf-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-image-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-archive-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-code-o"></i></a>

							</p>
								<a href="comePost?id=6">View more</a>
						</figcaption>			

					</figure>

				</div>

				<h2>Winston</h2>

				<div class="grid">

					<figure class="effect-winston">

						<img src="image/yase.jpg" alt="img30">

						<figcaption>

							<h2>英雄亚瑟 <span>狮心王</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-star-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-comments-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-envelope-o"></i></a>

							</p>
							<a href="comePost?id=7">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-winston">

						<img src="image/zhenji.jpg" alt="img01">

						<figcaption>

							<h2>英雄甄姬 <span>花好月圆</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-star-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-comments-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-envelope-o"></i></a>

							</p>
							<a href="comePost?id=8">View more</a>

						</figcaption>			

					</figure>

				</div>

				

				<h2>Terry</h2>

				<div class="grid">

					<figure class="effect-terry">

						<img src="image/zhaoyun.jpg" alt="img16">

						<figcaption>

							<h2>英雄赵云 <span>白执事</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-download"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-heart"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-share"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-tags"></i></a>

							</p>
							<a href="comePost?id=9">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-terry">

						<img src="image/wuzetian.jpg" alt="img26">

						<figcaption>

							<h2>英雄武则天  <span>东方不败</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-download"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-heart"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-share"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-tags"></i></a>

							</p>
							<a href="comePost?id=10">View more</a>

						</figcaption>			

					</figure>

				</div>

				

				<h2>Apollo</h2>

				<div class="grid">

					<figure class="effect-apollo">

						<img src="image/lvbu.jpg" alt="img18">

						<figcaption>

							<h2>英雄吕布<span>末日机甲</span></h2>

							<p>Apollo's last game of pool was so strange.</p>

							<a href="comePost?id=11">View more</a>

						</figcaption>	
								

					</figure>

					<figure class="effect-apollo">

						<img src="image/sunwukong.jpg" alt="img22">

						<figcaption>

							<h2>英雄孙悟空 <span>至尊宝</span></h2>

							<p>Apollo's last game of pool was so strange.</p>

							<a href="comePost?id=12">View more</a>

						</figcaption>			

					</figure>

				</div>

				

				

				<h2>Moses</h2>

				<div class="grid">

					<figure class="effect-moses">

						<img src="image/gaojianli.jpg" alt="img05">

						<figcaption>

							<h2>英雄高渐离 <span>金属狂潮</span></h2>

							<p>Moses loves to run after butterflies.</p>

							<a href="comePost?id=13">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-moses">

						<img src="image/anqila.jpg" alt="img17">

						<figcaption>

							<h2>英雄安其拉 <span>电子纪元</span></h2>

							<p>Moses loves to run after butterflies.</p>

							<a href="comePost?id=14">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Jazz</h2>

				<div class="grid">

					<figure class="effect-jazz">

						<img src="image/diaochan.jpg" alt="img25">

						<figcaption>

							<h2>英雄貂蝉 <span>异域舞娘</span></h2>

							<p>When Jazz starts to chase cars, the whole world stands still.</p>

							<a href="comePost?id=15">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-jazz">

						<img src="image/liubang.jpg" alt="img06">

						<figcaption>

							<h2>英雄刘邦 <span>圣殿之光</span></h2>

							<p>When Jazz starts to chase cars, the whole world stands still.</p>

							<a href="comePost?id=16">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Ming</h2>

				<div class="grid">

					<figure class="effect-ming">

						<img src="image/xiaoqiao.jpg" alt="img09">

						<figcaption>

							<h2>英雄小乔 <span>天鹅之梦</span></h2>

							<p>Ming sits in the corner the whole day. She's into crochet.</p>

							<a href="comePost?id=17">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-ming">

						<img src="image/daji.jpg" alt="img08">

						<figcaption>

							<h2>英雄妲己 <span>热情桑巴</span></h2>

							<p>Ming sits in the corner the whole day. She's into crochet.</p>

							<a href="comePost?id=18">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Lexi</h2>

				<div class="grid">

					<figure class="effect-lexi">

						<img src="image/bianque.jpg" alt="img12">

						<figcaption>

							<h2>英雄扁鹊 <span>炼金王</span></h2>

							<p>Each and every friend is special. Lexi won't hide a single cookie.</p>

							<a href="comePost?id=19">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-lexi">

						<img src="image/lvbu_2.jpg" alt="img03">

						<figcaption>

							<h2>英雄吕布 <span>圣诞狂欢</span></h2>

							<p>Each and every friend is special. Lexi won't hide a single cookie.</p>

							<a href="comePost?id=20">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Duke</h2>

				<div class="grid">

					<figure class="effect-duke">

						<img src="image/zhangliang.jpg" alt="img27">

						<figcaption>

							<h2>英雄张良 <span>天堂福音</span></h2>

							<p>Duke is very bored. When he looks at the sky, he feels to run.</p>

							<a href="comePost?id=21">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-duke">

						<img src="image/xiaoqiao_2.jpg" alt="img17">

						<figcaption>

							<h2>英雄小乔 <span>纯白花嫁</span></h2>

							<p>Duke is very bored. When he looks at the sky, he feels to run.</p>

							<a href="comePost?id=22">View more</a>

						</figcaption>			

					</figure>

				</div>

			</div>
	</div>
	
	<!-- 登录模态框 -->
	
	<div id="modal" style="width: 500px; height: 500px" >
		<h1 align="center">用户登录页面</h1>
  	  <p></p>
  	  <form action="login" method="post">
   			<div class="input-group input-group-lg">
			<input name="loginName" type="text" class="form-control" placeholder="用户名" style="width: 417px">
			</div>
		<p></p>
   			<div class="input-group input-group-lg">
			
			<input type="password" name="loginPassWord" class="form-control" placeholder="密码"  style="width: 417px">
			</div>
		<p></p>
		<label for="check"><input type="checkbox" name="checkbox" id="check" value="1">我同意该<u>用户协议</u>.</label>
		<p></p>
		<footer>
			<button type="submit" class="btn btn-primary btn-lg" style="width: 205px">登录</button> 
			<button type="button" class="btn btn-primary btn-lg" data-iziModal-close style="width: 205px">取消</button>	  
		</footer>	
	</form>
		
	</div>
	<!-- 注册模态框 -->
	<div id="modal_2" style="width: 500px; height: 500px" >
			<h1 align="center">用户注册页面</h1>
			 <form action="register" method="post">
		<div class="input-group input-group-lg">
			
			<input type="text" class="form-control" name="loginName" placeholder="用户名注册"  style="width: 417px">
		</div>
			<p></p>
   		<div class="input-group input-group-lg">
				<input type="password" class="form-control" name="loginPassWord" placeholder="密码"   style="width: 417px">
		</div>
		<p></p>
		
		<p></p>
		<label for="check"><input type="checkbox" name="checkbox" id="check_2" value="1">我同意该<u>用户协议</u></label>
		<p></p>
		<footer>
			<button type="submit" class="btn btn-primary btn-lg" style="width: 205px">注册</button> 
			<button type="button" class="btn btn-primary btn-lg" data-iziModal-close style="width: 205px">取消</button>	  
		</footer>
		</form>
	</div>
  </body>
  <script>
  
	//初始化izimodal
	$("#modal").iziModal({
	        overlayClose: false,
	        width: 600,
	        autoOpen: false,
			padding: 40,
		    iconColor: "",
			bodyOverflow: false,
			overlayClose: true,
	        overlayColor: 'rgba(0, 0, 0, 0.6)',
	        onOpened: function() {
	            console.log('onOpened');
	        },
	        onClosed: function() {
	            console.log('onClosed');  
	        }
	    });
	    $(document).on('click', '.trigger', function (event) {
	        event.preventDefault();
	        $('#modal').iziModal('open');
	    });
	
	    $("#modal").on('click', 'header a', function(event) {
	        event.preventDefault();
	        var index = $(this).index();
	        $(this).addClass('active').siblings('a').removeClass('active');
	        $(this).parents("div").find("section").eq(index).removeClass('hide').siblings('section').addClass('hide');

	        if( $(this).index() === 0 ){
	            $("#modal .iziModal-content .icon-close").css('background', '#ddd');
	        } else {
	            $("#modal .iziModal-content .icon-close").attr('style', '');
	        }
	    });

	    $("#modal").on('click', '.submit', function(event) {
	        event.preventDefault();

	        var fx = "wobble",  //wobble shake
	            $modal = $(this).closest('.iziModal');

	        if( !$modal.hasClass(fx) ){
	            $modal.addClass(fx);
	            setTimeout(function(){
	                $modal.removeClass(fx);
	            }, 1500);
	        }
	    });
	//初始化izimodal
	$("#modal_2").iziModal({
	        overlayClose: false,
	        width: 600,
	        autoOpen: false,
			padding: 40,
		    iconColor: "",
			bodyOverflow: false,
			overlayClose: true,
	        overlayColor: 'rgba(0, 0, 0, 0.6)',
	        onOpened: function() {
	            console.log('onOpened');
	        },
	        onClosed: function() {
	            console.log('onClosed');  
	        }
	    });
	    $(document).on('click', '.trigger_2', function (event) {
	        event.preventDefault();
	        $('#modal_2').iziModal('open');
	    });
	
	    $("#modal_2").on('click', 'header a', function(event) {
	        event.preventDefault();
	        var index = $(this).index();
	        $(this).addClass('active').siblings('a').removeClass('active');
	        $(this).parents("div").find("section").eq(index).removeClass('hide').siblings('section').addClass('hide');

	        if( $(this).index() === 0 ){
	            $("#modal_2 .iziModal-content .icon-close").css('background', '#ddd');
	        } else {
	            $("#modal_2 .iziModal-content .icon-close").attr('style', '');
	        }
	    });

	    $("#modal_2").on('click', '.submit', function(event) {
	        event.preventDefault();

	        var fx = "wobble",  //wobble shake
	            $modal_2 = $(this).closest('.iziModal');

	        if( !$modal_2.hasClass(fx) ){
	            $modal_2.addClass(fx);
	            setTimeout(function(){
	                $modal_2.removeClass(fx);
	            }, 1500);
	        }
	    });
</script>
  
</html>
